<template>
  <div style="padding: 20px; background-color: #f9f9f9; min-height: 100vh;">
    <el-table :data="tableData" border style="width: 100%" :header-cell-style="{ background: '#e6f7ff', color: '#333' }">
      <el-table-column type="index" label="序号" width="80" />
      <el-table-column prop="ticketCode" label="到票单号" width="150" />
      <el-table-column prop="ticketName" label="到票主题" width="200" />
      <el-table-column prop="ticketType" label="到票类型" width="150" />
      <el-table-column prop="ticketDate" label="到票时间" width="150" />
      <el-table-column prop="ticketMomeny" label="到票金额" width="120" />
      <el-table-column prop="receiveTicket" label="到票方" width="150" />
      <el-table-column prop="ticketDesc" label="备注" width="200" />
    </el-table>

    <!-- 分页组件 -->
    <div style="margin-top: 20px;">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.PageIndex"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="page.PageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.TotalCount"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import axios from 'axios';
import { onMounted, ref } from 'vue';

// 初始化分页参数
const page = ref({
  PageIndex: 1,
  PageSize: 10,
  TotalCount: 0
});

// 表格数据
const tableData = ref([]);

// 获取数据
const getTableData = async () => {
  try {
    const res = await axios.get("/api/InvoiceTicket/GetTickets", { params: page.value });
    tableData.value = res.data.totalPage;
    page.value.TotalCount = res.data.totalcount;
  } catch (error) {
    console.error("获取数据失败:", error);
  }
};

// 监听每页大小变化
const handleSizeChange = (val: number) => {
  page.value.PageSize = val;
  page.value.PageIndex = 1; // 切换页面大小时重置为第一页
  getTableData();
};

// 监听当前页变化
const handleCurrentChange = (val: number) => {
  page.value.PageIndex = val;
  getTableData();
};

// 页面挂载后加载数据
onMounted(() => {
  getTableData();
});
</script>